<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    this.$router.beforeEach((to, from, next) => {
      this.$store.state.app.show = false;
      next();
    });
  },
  mounted() {
    this.resize();
    window.addEventListener("resize", this.resize);
    console.log(this.$store.state);
  },
  methods: {
    resize() {
      const container = document.querySelector("#app");

      const width = window.innerWidth;
      const height = window.innerHeight;
      const scaleX = width / 1920;
      const scaleY = height / 1080;
      const scale = Math.min(scaleX, scaleY);
      container.style.transform = `scale(${scale})`;
      container.style.width = `${1920}px`;
      container.style.height = `${1080}px`;
      container.style.transformOrigin = "top left";
      // 中心定位
      const marginX = (width - 1920 * scale) / 2;
      const marginY = (height - 1080 * scale) / 2;
      container.style.position = "absolute";
      container.style.left = `${marginX}px`;
      container.style.top = `${marginY}px`;

      const dialogs = document.querySelectorAll(".el-dialog__wrapper");
      dialogs.forEach((dialog) => {
        dialog.style.zIndex = 1050; // 或者你希望的z-index值
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 可选的表格样式，保留或移除视需要 */

* {
  color: #333;
  font-family: Source Han Sans CN;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}
#app {
  width: 1920px;
  height: 1080px;
  position: absolute;
  transform-origin: top left;

  &::v-deep .el-table tr,
  &::v-deep .el-table td,
  &::v-deep .el-table th {
    font-weight: 600 !important;
    // font-size: 16px;
  }

  &::v-deep .el-table--border,
  &::v-deep .el-table--group {
    border-color: #999 !important;
  }
  &::v-deep .el-table td.el-table__cell,
  &::v-deep .el-table th.el-table__cell.is-leaf {
    border-color: #999 !important;
  }
  &::v-deep .el-table td.el-table__cell,
  &::v-deep .el-table--border th.el-table__cell {
    border-color: #999 !important;
  }
  &::v-deep .el-table--border {
    border-right: 1px solid #999 !important;
    border-bottom: 1px solid #999 !important;
  }
  &::v-deep .el-dialog__wrapper {
    z-index: 1050 !important; // 设置一个较高的z-index值，确保弹窗在蒙版上方
  }
}
</style>
